.control-rank-range-selector, .control-date-range-selector, .control-sample-size-selector {
	width: 100%;
	margin-bottom: 15px;

	label {
		input {
			text-align: center;
		}

		> input, > .input-group {
			width: 100%;
		}
	}
}

.control-label {
	width: 100%;

	> span:first-child {
		width: 100%;
		text-align: center;
		display: block;
		margin-bottom: 3px;
	}

	img {
		width: 50%;
		display: block;
		margin: 0 auto;
	}
}

.control-range-slider {
	height: 120px;
	position: relative;
	margin: 0px 0 10px 0;

	.control-range-slider-range {
		height: 100%;
		width: 20%;
		margin: 0 auto;

		$overlap: 30%;

		> section {

			&:nth-child(5n+1), &:first-child, &:last-child {
				background-color: lightgray;

				&.low, &.high, &.active {
					background-color: $blue;
				}

				&.selection {
					background-color: $lightblue;
				}
			}

			&.blocked {
				border-left: solid 2px $red;
				border-right: solid 2px $red;
			}

			&.low {
				margin-left: -$overlap;
			}

			&.selection {
				background-color: $lighterblue;
			}

			&.active {
				background-color: $aqua;
				cursor: ns-resize;
			}

			&.low, &.high {
				background-color: $blue;
				cursor: ns-resize;
				width: 100% + $overlap;
			}

			&.low.high {
				margin-left: -$overlap;
				width: 100% + 2 * $overlap;
			}
		}
	}

	&.dragging {
		cursor: ns-resize;
	}
}
